<template>
    <el-aside width="95px">
        <ul  class="menu">
            <li v-for="item in getMenuList" :key="item.id" @click="menuListChange(item.url)">
                <div :class="{active:item.url=== $route.path  }">
                    <i style="" class="iconfont " :class="item.ico"></i>
                    <div class="menuName">{{ item.name.replace(/(管理|信息)/g, '')}}</div>
                </div>
            </li>

        </ul>
    </el-aside>
</template>

<script>

import {mapGetters} from 'vuex'
export default {
    name: "MenuList",
    data() {
        return {
          list: [
              {}
          ]
        }
    },

    methods: {
        menuListChange(router){
            (this.$route.fullPath !== router) && this.$router.push(router)
        },
    },
    computed: {
        ...mapGetters({getMenuList:'menu/getMenuList'})
    }
}
</script>

<style lang="less" scoped>
.el-aside {
    background: #f4f4f4;
    height: 100vh;
    .menu {
        margin-top: 23px;
        overflow: hidden;
        position: fixed;
        top:53px;
        background: #f4f4f4;
        height: 100vh;
        li {
            list-style: none;
            position: relative;
            padding:  0 27px;
            margin-bottom:25px;
            cursor: pointer;

            >div {
                font-size: 14px;
                &.bottomLi{
                    padding-bottom:  20px;
                    border-bottom: 1px solid #e5e5e5;
                }
                &.active{

                    &::before {
                        content: '';
                        display: block;
                        width: 5px;
                        height: 60px;
                        background: #2981ff;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                    i {
                        color: #4180f3;
                    }
                }
                i {
                    font-size: 30px;
                    color: #727e97;
                    &.icon-shouye-shouye {
                        font-size: 28px
                    }
                    &.icon-wodefangwu {
                        font-size: 36px
                    }
                    &.icon-wuyeguanli{
                        font-size: 42px
                    }
                }
                div {
                    margin-top: 10px;
                }
            }

        }
    }
}

</style>